<template>
    <div>
      <el-row type="flex" justify="center">
        <el-col style="width: 260px;padding-top: calc(35vh)">

          <el-form :model="confirmrule" :rules="crule" ref="confirmrule" class="demo-ruleForm">
            <el-form-item prop="user_pwd">
              <el-input size="medium" v-model="confirmrule.user_pwd" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item prop="user_repwd">
              <el-input type="password" v-model="confirmrule.user_repwd" size="medium" placeholder="请确认密码">
              </el-input>
            </el-form-item>
            <el-form-item style="text-align: left">
              <el-button @click="submitRepwd('confirmrule')" size="medium" style="width: 100%;" type="primary">确定</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
        name: "Confirm",
        data() {
            return {
              confirmrule:{
                user_pwd:'',
                user_repwd:'',
              },
              crule:{
                user_pwd:[
                  {required: true, message: '请输入密码', trigger: 'blur'},
                ],
                user_repwd:[
                  {required: true, message: '请确认密码', trigger: 'blur'},
                ],
              }
            }
        },
        methods: {
          submitRepwd(formName){

              let thi=this
              if (thi.confirmrule.user_pwd!=thi.confirmrule.user_repwd) {
                thi.$message.error('密码不一致')
              }else {
                this.$refs[formName].validate((valid) => {
                  if (valid) {
                    alert('submit!');
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
              }

            }

        },
    }
</script>

<style scoped>

</style>
